 /*
 * @description: 数据统计/掌大客服、商家客服
 * @Author: along
 * @Date: 2020-09-25
 * @Last Modified by: along
 * @Last Modified time: 2020-09-25
 */
<template>
    <div class="container customData">
        <div class="wrap">
            <!-- wrap head -->
            <div class="wrap-head" v-if="authList.includes('statistic.shop') || authList.includes('statistic.zsdx')">
                <p>客服数据统计</p>
                <el-radio-group
                    v-model="formData.type"
                    size="small"
                    @change="fnChangeType(formData.type)"
                >
                    <el-radio-button v-if="authList.includes('statistic.zsdx')" label="platform">平台数据</el-radio-button>
                    <el-radio-button v-if="authList.includes('statistic.shop')" label="business">商家数据</el-radio-button>
                </el-radio-group>
            </div>
            <!-- 数据展示 -->
            <div class="view">
                <!-- view nav -->
                <div class="view-nav">
                    <div class="view-box">
                        <p class="view-box-title">统计时间:</p>
                        <el-date-picker
                            v-model="date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions()"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="getList()"
                        />
                    </div>
                    <div class="view-box" v-if="authList.includes('statistic.shop')">
                        <p class="view-box-title">店铺名称:</p>
                        <el-select
                            v-model="formData.title_mess"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入店铺名称"
                            :remote-method="remoteMethod"
                            :loading="loading"
                            @change="getList()"
                            size="small"
                            :style="{marginLeft: '10px', width: '200px'}"
                        >
                            <el-option
                                v-for="item in formData.suggestList"
                                :key="item.shop_no"
                                :label="item.shop_title"
                                :value="item.shop_no"
                            />
                        </el-select>
                    </div>
                    <div class="view-box">
                        <p class="view-box-title">接待客服:</p>
                        <el-select
                            v-model="formData.customer"
                            clearable
                            filterable
                            placeholder="请选择"
                            size="small"
                            @change="getList()"
                        >
                            <el-option
                                v-for="item in formData.customList"
                                :key="item.kf_no"
                                :label="item.nickname"
                                :value="item.kf_no"
                            />
                        </el-select>
                    </div>
                    <div class="view-box">
                        <el-button
                            size="small"
                            type="primary"
                            :style="{width: '65px', height: '32px'}"
                            @click="getList()"
                        >
                            查询
                        </el-button>
                    </div>
                </div>

                <!-- view data -->
                <div class="view-data">
                    <div
                        class="view-list"
                        ref="viewList"
                        :style="{background: formData.color[0]}"
                    >
                        <svg
                            class="icon view-list-bg"
                            aria-hidden="true"
                            :viewBox="formData.svgViewBox"
                            preserveAspectRatio="xMaxYMin slice"
                        >
                            <use xlink:href="#zsdxshuju_beijingdianzhui"></use>
                        </svg>
                        <img src="@/assets/image/icon1.png" class="view-list-logo">
                        <div class="view-info">
                            <div class="view-list-title">
                                <div class="view-list-title-text">总消息数</div>
                                <el-popover
                                    placement="right"
                                    title=""
                                    width="224"
                                    trigger="hover"
                                    :content="formData.topList[0]"
                                >
                                    <i
                                        class="zsdxfont zsdxtishiwenhao"
                                        slot="reference"
                                    ></i>
                                </el-popover>
                            </div>
                            <div class="view-list-number">{{ formData.dataList.msg_count }}</div>
                        </div>
                    </div>
                    <div
                        class="view-list"
                        ref="viewList"
                        :style="{background: formData.color[1]}"
                    >
                        <svg
                            class="icon view-list-bg"
                            aria-hidden="true"
                            :viewBox="formData.svgViewBox"
                            preserveAspectRatio="xMaxYMin slice"
                        >
                            <use xlink:href="#zsdxshuju_beijingdianzhui"></use>
                        </svg>
                        <img src="@/assets/image/icon2.png" class="view-list-logo">
                        <div class="view-info">
                            <div class="view-list-title">
                                <div class="view-list-title-text">接入人数</div>
                                <el-popover
                                    placement="right"
                                    title=""
                                    width="224"
                                    trigger="hover"
                                    :content="formData.topList[1]"
                                >
                                    <i
                                        class="zsdxfont zsdxtishiwenhao"
                                        slot="reference"
                                    ></i>
                                </el-popover>
                            </div>
                            <div class="view-list-number">{{ formData.dataList.user_count }}</div>
                        </div>
                    </div>
                    <div
                        class="view-list"
                        ref="viewList"
                        :style="{background: formData.color[2]}"
                    >
                        <svg
                            class="icon view-list-bg"
                            aria-hidden="true"
                            :viewBox="formData.svgViewBox"
                            preserveAspectRatio="xMaxYMin slice"
                        >
                            <use xlink:href="#zsdxshuju_beijingdianzhui"></use>
                        </svg>
                        <img src="@/assets/image/icon3.png" class="view-list-logo">
                        <div class="view-info">
                            <div class="view-list-title">
                                <div class="view-list-title-text">会话解决数</div>
                                <el-popover
                                    placement="right"
                                    title=""
                                    width="224"
                                    trigger="hover"
                                    :content="formData.topList[2]"
                                >
                                    <i
                                        class="zsdxfont zsdxtishiwenhao"
                                        slot="reference"
                                    ></i>
                                </el-popover>
                            </div>
                            <div class="view-list-number">{{ formData.dataList.solve_session_count }}</div>
                        </div>
                    </div>
                    <div
                        class="view-list"
                        ref="viewList"
                        :style="{background: formData.color[3]}"
                    >
                        <svg
                            class="icon view-list-bg"
                            aria-hidden="true"
                            :viewBox="formData.svgViewBox"
                            preserveAspectRatio="xMaxYMin slice"
                        >
                            <use xlink:href="#zsdxshuju_beijingdianzhui"></use>
                        </svg>
                        <img src="@/assets/image/icon4.png" class="view-list-logo">
                        <div class="view-info">
                            <div class="view-list-title">
                                <div class="view-list-title-text">主动发起会话数</div>
                                <el-popover
                                    placement="right"
                                    title=""
                                    width="224"
                                    trigger="hover"
                                    :content="formData.topList[3]"
                                >
                                    <i
                                        class="zsdxfont zsdxtishiwenhao"
                                        slot="reference"
                                    ></i>
                                </el-popover>
                            </div>
                            <div class="view-list-number">{{ formData.dataList.server_session_count }}</div>
                        </div>
                    </div>
                    <div
                        class="view-list"
                        ref="viewList"
                        :style="{background: formData.color[4]}"
                    >
                        <svg
                            class="icon view-list-bg"
                            aria-hidden="true"
                            :viewBox="formData.svgViewBox"
                            preserveAspectRatio="xMaxYMin slice"
                        >
                            <use xlink:href="#zsdxshuju_beijingdianzhui"></use>
                        </svg>
                        <img src="@/assets/image/icon5.png" class="view-list-logo">
                        <div class="view-info">
                            <div class="view-list-title">
                                <div class="view-list-title-text">综合满意度</div>
                                <el-popover
                                    placement="right"
                                    title=""
                                    width="224"
                                    trigger="hover"
                                    :content="formData.topList[4]"
                                >
                                    <i
                                        class="zsdxfont zsdxtishiwenhao"
                                        slot="reference"
                                    ></i>
                                </el-popover>
                            </div>
                            <div class="view-list-number">{{ formData.dataList.avg_session_score }}</div>
                        </div>
                    </div>
                    <div
                        class="view-list"
                        ref="viewList"
                        :style="{background: formData.color[5]}"
                    >
                        <svg
                            class="icon view-list-bg"
                            aria-hidden="true"
                            :viewBox="formData.svgViewBox"
                            preserveAspectRatio="xMaxYMin slice"
                        >
                            <use xlink:href="#zsdxshuju_beijingdianzhui"></use>
                        </svg>
                        <img src="@/assets/image/icon6.png" class="view-list-logo">
                        <div class="view-info">
                            <div class="view-list-title">
                                <div class="view-list-title-text">平均响应时长</div>
                                <el-popover
                                    placement="right"
                                    title=""
                                    width="224"
                                    trigger="hover"
                                    :content="formData.topList[5]"
                                >
                                    <i
                                        class="zsdxfont zsdxtishiwenhao"
                                        slot="reference"
                                    ></i>
                                </el-popover>
                            </div>
                            <div class="view-list-number">{{ formData.dataList.avg_response_duration | dateFilter }}</div>
                        </div>
                    </div>
                    <!-- <div
                        class="view-list"
                        ref="viewList"
                        :style="{background: formData.color[6]}"
                    >
                        <svg
                            class="icon view-list-bg"
                            aria-hidden="true"
                            :viewBox="formData.svgViewBox"
                            preserveAspectRatio="xMaxYMin slice"
                        >
                            <use xlink:href="#zsdxshuju_beijingdianzhui"></use>
                        </svg>
                        <div class="view-list-logo"></div>
                        <div class="view-info">
                            <div class="view-list-title">
                                <div class="view-list-title-text">平均首次响应时长</div>
                                <el-popover
                                    placement="right"
                                    title=""
                                    width="224"
                                    trigger="hover"
                                    :content="formData.topList[6]"
                                >
                                    <i
                                        class="zsdxfont zsdxtishiwenhao"
                                        slot="reference"
                                    ></i>
                                </el-popover>
                            </div>
                            <div class="view-list-number">{{ formData.dataList.avg_response_duration | dateFilter }}</div>
                        </div>
                    </div> -->
                    <div
                        class="view-list"
                        ref="viewList"
                        :style="{background: formData.color[7]}"
                    >
                        <svg
                            class="icon view-list-bg"
                            aria-hidden="true"
                            :viewBox="formData.svgViewBox"
                            preserveAspectRatio="xMaxYMin slice"
                        >
                            <use xlink:href="#zsdxshuju_beijingdianzhui"></use>
                        </svg>
                        <img src="@/assets/image/icon7.png" class="view-list-logo">
                        <div class="view-info">
                            <div class="view-list-title">
                                <div class="view-list-title-text">平均等待时长</div>
                                <el-popover
                                    placement="right"
                                    title=""
                                    width="224"
                                    trigger="hover"
                                    :content="formData.topList[7]"
                                >
                                    <i
                                        class="zsdxfont zsdxtishiwenhao"
                                        slot="reference"
                                    ></i>
                                </el-popover>
                            </div>
                            <div class="view-list-number">{{ formData.dataList.avg_queue_duration | dateFilter }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chart-wrap">
                <div class="chart-title">
                    <div class="chart-title-left">
                        <div class="chart-title-text">会话量</div>
                        <el-popover
                            placement="right"
                            title=""
                            width="224"
                            trigger="hover"
                            content="客服发出的消息数与接待的客户发出的消息数之和(排队中的消息不计入)"
                        >
                            <i
                                class="zsdxfont zsdxtishiwenhao"
                                slot="reference"
                            ></i>
                        </el-popover>
                    </div>
                    <div class="chart-title-right">
                        <div class="view-box">
                            <p class="view-box-title">统计时间:</p>
                            <el-date-picker
                                v-model="dateEchart"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions()"
                                :default-time="['00:00:00', '23:59:59']"
                                size="small"
                                @change="getChartList()"
                                :style="{width: '362px'}"
                            />
                        </div>
                        <div class="view-box" v-if="authList.includes('statistic.shop')">
                            <p class="view-box-title">店铺名称:</p>
                            <el-select
                                v-model="formData.title"
                                filterable
                                remote
                                reserve-keyword
                                placeholder="请输入店铺名称"
                                :remote-method="remoteMethod"
                                :loading="loading"
                                @change="getChartList()"
                                size="small"
                                :style="{marginLeft: '10px', width: '200px'}"
                            >
                                <el-option
                                    v-for="item in formData.suggestList"
                                    :key="item.shop_no"
                                    :label="item.shop_title"
                                    :value="item.shop_no"
                                />
                            </el-select>
                        </div>
                        <div class="view-box">
                            <p class="view-box-title">接待客服:</p>
                            <el-select
                                v-model="formData.customEchart"
                                clearable
                                filterable
                                placeholder="请选择"
                                size="small"
                                @change="getChartList()"
                            >
                                <el-option
                                    v-for="item in formData.customList"
                                    :key="item.kf_no"
                                    :label="item.nickname"
                                    :value="item.kf_no"
                                />
                            </el-select>
                        </div>
                    </div>
                </div>
                <div
                    class="chart-main"
                    id="statiscitCharts"
                    ref="statiscitCharts"
                ></div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import { dateFormat } from "@/assets/js/utils";
import { mapState } from 'vuex';

const LIST = {
    type: "", //平台:platform  商家:business
    customer: "", //接待客服消息列表
    title: '',//店铺名称
    dataList: {}, //统计数据
    customList: [], //接待客服列表
    svgViewBox: "0 0 276 59",
    statiscitCharts: "",//折线图实例对象
    echart: {
        xList: [],
        yList: []
    },
    customEchart: "", //接待客服折线图
    color: ['#E4ECF9','#FAE7CF','#E6E4F9','#E6E4F9','#FAE5E5','#C5E6CB','#C5E6CB','#BCE6DD'],
    topList: [
        '客服发出的消息数与接待的客户发出的消息数之和(排队中的消息不计入)的和',
        '进入到客服接待列表的客户人数，按日去重计算',
        '已结束会话中，标记为已解决的会话数之和',
        '客服主动发起的会话数，不包括转接入和待转接列表中主动去除的情况',
        '总分数除以评价次数',
        '接入后所有客户未命中自动回复的询问和客服回复时间间隔的平均值',
        '接入后从客户未命中自动回复的首次询问时间到客服首次回复时间间隔的平均值',
        '客户发送消息到客服首次回复消息的平均时间间隔'
    ],
    suggestList: [],
    title_mess: ''
};

export default {
    components: {},
    data() {
        return {
            formData: {
                ...LIST
            },
            date: [], //统计时间消息列表
            dateEchart: [], //统计时间折线图
            loading: false
        };
    },
    computed: {
        ...mapState({
            authList: state => state.global.authList,
            userInfo: state => state.global.userInfo
        })
    },
    mounted() {
        this.init();
        window.addEventListener("resize", () => {
            this.formData.statiscitCharts.resize();
        });

        setTimeout(()=>{
            if(this.authList.includes('statistic.zsdx') && !this.authList.includes('statistic.shop')) {
                this.$set(this.formData, 'type', 'platform');
            }
            if(this.authList.includes('statistic.shop') && !this.authList.includes('statistic.zsdx')) {
                this.$set(this.formData, 'type', 'business');
            }
        },200);
    },
    methods: {
        /**
         * @description 页面数据初始化
         */
        init() {
            // console.log(this.authList, 'authList');
            this.getList();
            this.getChartList();
            this.getCustomList();
            this.getShopList();
        },

        /**
         * @description 切换数据类型
         * @param { String }  type  //平台:platform  商家:business
         */
        fnChangeType(type) {
            if(type == 'platform') { //平台
                // console.log('1');
            } else if (type == 'business') { //商家
                // console.log('2');
            }
        },

        /**
         * @description 获取统计消息列表
         */
        getList() {
            this.$post("/Statistic/getSessionStatistic",{
                start_time: this.date === null ? '' : (this.date.length == 0 ? '' : parseInt(new Date(this.date[0]).getTime() / 1000)),
                end_time: this.date === null ? '' : (this.date.length == 0 ? '' : parseInt(new Date(this.date[1]).getTime() / 1000)),
                user_no: this.formData.type == 'platform' ? 'kc_official' : this.formData.title_mess,
                kf_no: this.formData.customer
            },resp => {
                if (resp.code == 1) {
                    this.formData.dataList = {
                        ...resp.data
                    };
                } else if (resp.code == 0) {
                    this.$notify({
                        title: "提示",
                        message: resp.msg,
                        type: "warning",
                        duration: 2000,
                    });
                }
            });
        },

        /**
         * @description 获取图表数据
         */
        getChartList() {
            this.$post("/Statistic/getSessionMsgStatistic",{
                start_time: this.dateEchart === null ? '' : (this.dateEchart.length == 0 ? '' : parseInt(new Date(this.dateEchart[0]).getTime() / 1000)),
                end_time: this.dateEchart === null ? '' : (this.dateEchart.length == 0 ? '' : parseInt(new Date(this.dateEchart[1]).getTime() / 1000)),
                kf_no: this.formData.customEchart,
                user_no: this.formData.type == 'platform' ? 'kc_official' : this.formData.title
            },resp => {
                if (resp.code == 1) {
                    let xList = [];
                    let yList = [];
                    resp.data.list.forEach(option => {
                        xList.push(option.time);
                        yList.push(option.msg_count);
                    });

                    this.$set(this.formData.echart, 'xList', xList);
                    this.$set(this.formData.echart, 'yList', yList);

                    this.initCharts();

                    // console.log(this.formData.echart);
                } else if (resp.code == 0) {
                    this.$notify({
                        title: "提示",
                        message: resp.msg,
                        type: "warning",
                        duration: 2000,
                    });
                }
            });
        },

        /**
         * @description 获取接待客服列表
         */
        getCustomList () {
            this.$post("/Manage/getKfList",{
                type: 99,
            },resp => {
                if (resp.code == 1) {
                    this.formData.customList = resp.data.list;

                    this.formData.customList.forEach(option => {
                        if(option.nickname == this.userInfo.nickname) {
                            this.$set(this.formData, 'customer', option.kf_no);
                            this.$set(this.formData, 'customEchart', option.kf_no);
                            this.getList();
                        }
                    });
                } else if (resp.code == 0) {
                    this.$notify({
                        title: "提示",
                        message: resp.msg,
                        type: "warning",
                        duration: 2000,
                    });
                }
            });
        },

        /**
         * @description 获取店铺客服列表
         */
        getShopList (query) {
            this.$post("/Manage/getShopList",{
                shop_title: query ? query : this.formData.shop_title,
            },resp => {
                if(resp.code == 1) {
                    this.formData.suggestList = resp.data.list;
                }
            });
        },

        /**
         * @description 搜索店铺
         */
        remoteMethod () {
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getShopList(query);
                }, 200);
            }
        },

        /**
         * @description 初始化图表
         */
        initCharts() {
            this.formData.statiscitCharts = echarts.init(document.getElementById("statiscitCharts"));
            this.formData.statiscitCharts.setOption({
                color: [
                    "#20A0FF",
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#bda29a",
                    "#6e7074",
                ],
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(0,0,0,0.7)",
                    padding: 12,
                    formatter: (params, ticket, callback) => {
                        let res = dateFormat(params[0].name * 1000, "MM月dd日");

                        let param = params[0];

                        for (var i in params) {
                            res +=
                                "<br>" +
                                params[i].seriesName +
                                ": " +
                                params[i].value;
                        }

                        return res;
                    },
                },
                legend: {
                    show: false,
                    data: ["会话量"],
                },
                grid: {
                    left: "32",
                    right: "32",
                    bottom: "32",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.formData.echart.xList,
                    axisLine: {
                        //y轴
                        show: true,
                        lineStyle: {
                            color: "#bbb",
                        },
                    },
                    splitLine: {
                        //网格线
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        formatter: (value, index) => {
                            return dateFormat(value * 1000, "MM/dd");
                        },
                        color: "#333",
                    },
                },
                yAxis: {
                    type: "value",
                    axisLine: {
                        //y轴
                        show: false,
                    },
                    splitLine: {
                        //网格线
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#bbb",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: "会话量",
                        type: "line",
                        stack: "总量",
                        data: this.formData.echart.yList,
                    },
                ],
            });
        },

        /**
         * @description 时间处理
         */
        pickerOptions() {
            return {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();

                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();

                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();

                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            };
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 12px 12px;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 4px;
    }
}
.wrap {
    min-width: 550px;
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    //数据切换
    .wrap-head {
        width: 100%;
        background: #ffffff;
        padding: 24px 32px 8px 32px;
        display: flex;
        align-items: center;
        &>p {
            color: #333333;
            font-size: 16px;
            font-weight: 500;
            margin-right: 12px;
        }
    }
    // 数据展示
    .view {
        width: 100%;
        box-sizing: border-box;
        padding: 24px 32px 0 32px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        .view-nav {
            width: 100%;
            // height: 32px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding-bottom: 16px;
            .view-box {
                display: flex;
                margin-right: 32px;
                align-items: center;
                color: #606266;
                white-space: nowrap;
                padding-bottom: 16px;
                &-title {
                    margin-right: 16px;
                    white-space: nowrap;
                }
            }
        }

        .view-data {
            width: calc(100% + 32px);
            margin-right: -32px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .view-list {
                position: relative;
                width: calc(25% - 32px);
                min-width: 276px;
                height: 112px;
                margin-bottom: 32px;
                margin-right: 32px;
                background: #E4ECF9;
                border-radius: 4px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding: 24px 16px;
                &-bg {
                    position: absolute;
                    width: 100%;
                    max-height: 70%;
                    left: 0;
                    bottom: 0;
                    mix-blend-mode: overlay;
                }
                &-logo {
                    width: 56px;
                    height: 56px;
                    background: #ffffff;
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    margin-right: 16px;
                    border-radius: 50%;
                    position: relative;
                    z-index: 1;
                }
                .view-info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                }
                .view-list-title {
                    display: flex;
                    align-items: center;
                    &-text {
                        height: 22px;
                        font-size: 16px;
                        font-weight: 400;
                        color: rgba(0, 0, 0, 0.8);
                        line-height: 22px;
                    }
                    .zsdxfont {
                        font-size: 14px;
                        line-height: 16px;
                        color: rgba(0, 0, 0, 0.8);
                        padding: 6px;
                        cursor: pointer;
                    }
                }
                .view-list-number {
                    height: 32px;
                    font-size: 30px;
                    font-weight: 500;
                    color: rgba(0, 0, 0, 0.8);
                    line-height: 32px;
                    margin-top: 10px;
                }
            }
        }
    }
}
.chart-wrap {
    flex: 1;
    width: 100%;
    min-height: 375px;
    background: #fff;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .chart-main {
        width: 100%;
        flex: 1;
    }
}
.chart-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    .chart-title-left {
        display: flex;
        align-items: center;
        height: 16px;
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.8);
        line-height: 16px;
        position: relative;
        top: -8px;
        .zsdxfont {
            font-size: 14px;
            line-height: 16px;
            margin-left: 8px;
        }
        .chart-title-text {
            white-space: nowrap;
        }
    }
    .chart-title-right {
        display: flex;
        align-items: center;
        .view-box {
            display: flex;
            margin-left: 32px;
            align-items: center;
            color: #606266;
            white-space: nowrap;
            padding-bottom: 16px;
            &-title {
                margin-right: 16px;
                white-space: nowrap;
            }
        }
    }
}
</style>

<style lang="less">
.customData {
    .el-radio-button__inner {
        font-size: 14px;
    }
}
</style>